<template>
  <div id="bar-bg" class="echarts"></div>
</template>

<script setup>
import * as echarts from 'echarts';
const props = defineProps({
  data: {
    type: Array
  }
});
const xAxisData = ref([]);
const seriesData = ref([]);

watch(
  () => props.data,
  val => {
    xAxisData.value = val.map(item => item.type);
    seriesData.value = val.map(item => item.data);
    initChart();
  }
);

onUnmounted(() => {
  echarts.dispose();
});

function initChart() {
  const chart = echarts.init(document.getElementById('bar-bg'));
  const option = {
    tooltip: {
      trigger: 'item'
    },
    xAxis: {
      type: 'category',
      data: xAxisData.value,
      axisLabel: {
        fontSize: 24,
        margin: 24
      },
      // 轴线
      axisLine: {
        show: false
      },
      // 刻度
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      minInterval: 1,
      axisLabel: {
        fontSize: 24,
        margin: 40
      },
      // 网格线
      splitLine: {
        show: false
      }
    },

    series: [
      {
        data: seriesData.value,
        type: 'bar',
        showBackground: true,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#4DFFDF' // 0% 处的颜色
              },
              {
                offset: 0.5,
                color: '#4CD5ED' // 50% 处的颜色
              },
              {
                offset: 1,
                color: '#4DA4FD' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          },
          borderRadius: 60
        },
        backgroundStyle: {
          color: '#02151A',
          borderRadius: 60
        }
      }
    ]
  };
  // 把配置和数据放这里
  chart.setOption(option);
}
</script>

<style scoped lang="less"></style>
